<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <script th:src="@{/static/js/vue.js}"></script>
    <script th:src="@{/static/js/axios.min.js}"></script>
    <script th:src="@{/static/js/index.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/index.css}">
</head>
<body>
  <div id="app">
      <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="参数名称">
              <el-input v-model="searchMap.name" placeholder="参数名称"></el-input>
          </el-form-item>

          <el-form-item label="参数选项">
              <el-input v-model="searchMap.options" placeholder="参数选项"></el-input>
          </el-form-item>

          <el-form-item>
              <el-button type="primary" @click="fetchData()">查询</el-button>
              <el-button type="primary" @click="formVisible=true,pojo={}">新增</el-button>
              <el-button type="primary" @click="back">模板列表</el-button>
          </el-form-item>
      </el-form>

      <el-table
          :data="paraList"
          style="width: 100%">
          <el-table-column
                  prop="id"
                  label="ID"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="参数名称"
                  width="180">
          </el-table-column>
          <el-table-column
                  prop="options"
                  label="选项">
          </el-table-column>
          <el-table-column
                  prop="sort"
                  label="排序">
          </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                  <el-button
                          size="mini"
                          @click="handleEdit(scope.row.id)">修改</el-button>
                  <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>

      <el-pagination
              @size-change="fetchData"
              @current-change="fetchData"
              :current-page.sync="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>

      <el-dialog title="编辑" :visible.sync="formVisible" >
          <el-form label-width="100px">
              <el-form-item label="参数名称">
                  <el-input  placeholder="参数名称" v-model="pojo.name"></el-input>
              </el-form-item>
              <el-form-item label="选项">
                  <el-input
                          type="textarea"
                          :autosize="{ minRows: 2, maxRows: 4}"
                          placeholder="请输入内容"
                          v-model="pojo.options">
                  </el-input>
              </el-form-item>
              <el-form-item label="排序">
                  <el-input placeholder="排序" v-model="pojo.sort"></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button @click="save()">保存</el-button>
                  <el-button @click="formVisible = false">关闭</el-button>
              </el-form-item>
          </el-form>
      </el-dialog>
  </div>
</body>
  <script>
    new Vue({
      el:"#app",
      data:{
          paraList:[],
          currentPage:1,
          size:10,
          total:0,
          searchMap:{},
          formVisible:false,
          pojo:{}
      },
      methods:{
          //查询
          fetchData(){
            axios.post(`/tpPara/findPage?pageNum=${this.currentPage}&pageSize=${this.size}`,this.searchMap).then(res=>{
                //总的list集合
                this.paraList=res.data.rows
                //总的记录数
                this.total=res.data.total
            })
          },
          //根据编号查询
          handleEdit(id){
              //显示窗口
              this.formVisible=true

              axios.get(`/tpPara/findById?id=${id}`).then(res=>{
                  //回显
                  this.pojo=res.data
                  this.pojo.options=this.pojo.options.replace(/,/g,"\n")

              })
          },
          //新增和修改
          save(){
              this.pojo.options=this.pojo.options.replace(/\n/g,",")  //使用回车代替逗号
              var url;
              if(this.pojo.id==null){
                  //新增
                  url=`/tpPara/add`
              } else {
                  //修改
                  url=`/tpPara/update`
              }
              axios.post(url,this.pojo).then(res=>{
                  //关闭窗口
                  this.formVisible=false
                  //刷新列表
                  this.fetchData()
              })
          },
          //删除
          handleDelete(id){
              this.$confirm('确定要删除此纪录吗？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                  //删除
                  axios.get(`/tpPara/delete?id=${id}`).then(res=>{
                      this.$message({
                          type: 'success',
                          message: '删除成功!'
                      });
                      //刷新列表
                      this.fetchData()
                  })
              }).catch(() => {
                  this.$message({
                      type: 'info',
                      message: '已取消删除'
                  });
              });
          },
          back(){
              window.location.href="/template/showIndex"
          }
      },
      created(){//页面渲染之前调用
            //参数列表
          this.fetchData()
      }
    })
  </script>
</html>